<template>
	<view class="home-container">
		<view class="tab-container">
			<tabs :tabs="list" @change="changeTabbar"></tabs>
		</view>
		<view class="doctor-container"  v-if="!showMine">
			<view v-for="(item,index) in dataSource">
				<view class="item" @click="toPage(item)">
					<view class="left">
						<view class="over-2">
							{{item.name}}
						</view>

						<view class="between color-gray">
							<view class="edu-item">
								<view class="">
									<u-icon name="thumb-up" color="#FB791B" size="22"></u-icon>
								</view>
								<view class="">
									{{item.likes}}
								</view>
							</view>
							<view class="edu-item">
								<view class="">
									<u-icon name="heart" color="#FB791B" size="22"></u-icon>
								</view>
								<view class="">
									{{item.collects}}
								</view>
							</view>
							<view class="edu-item">
								<view class="">
									<u-icon name="share-square" color="#FB791B" size="22"></u-icon>
								</view>
								<view class="">
									{{item.forwards}}
								</view>
							</view>
						</view>
					</view>
					<view>
						<image class="img" src="../../static/images/comBg.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mine-container" v-else>
			<view class="mine-stat">
				<view class="mine-title">
					我的宣教<text class="color-light">{{dataSource.length}}</text>篇
				</view>
				<view class="stats-card ">
					<view class="stat-item">
						<view class="stat-number color-light">230</view>
						<view class="stat-label">点赞</view>
					</view>
					<view class="stat-item">
						<view class="stat-number color-light">100</view>
						<view class="stat-label">收藏</view>
					</view>
					<view class="stat-item">
						<view class="stat-number color-light">60</view>
						<view class="stat-label">转发</view>
					</view>
				</view>

			</view>
			<view class="tab-container">
				<tabs :tabs="list2" @change="changeTabbar2"></tabs>
			</view>
			<view v-for="(item,index) in dataSource">
				<view class="item" @click="toPage(item)">
					<view class="left">
						<view class="over-2">
							{{item.name}}
						</view>

						<view class="between color-gray">
							<view class="edu-item">
								<view class="">
									<u-icon name="thumb-up" color="#FB791B" size="22"></u-icon>
								</view>
								<view class="">
									{{item.likes}}
								</view>
							</view>
							<view class="edu-item">
								<view class="">
									<u-icon name="heart" color="#FB791B" size="22"></u-icon>
								</view>
								<view class="">
									{{item.collects}}
								</view>
							</view>
							<view class="edu-item">
								<view class="">
									<u-icon name="share-square" color="#FB791B" size="22"></u-icon>
								</view>
								<view class="">
									{{item.forwards}}
								</view>
							</view>
						</view>
					</view>
					<view>
						<image class="img" src="../../static/images/comBg.png"></image>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import tabs from '../../components/CustomTabs.vue';
	import {
		mapGetters,
	} from 'vuex';
	export default {
		components: {
			tabs
		},
		data() {
			return {
				showMine: false,
				list: [{
					label: '医生文章',
					type: 'all'
				}, {
					label: '我的发布',
					type: 'mine'
				}],
				list2:[
					{ label: '全部', value: 'all' },
					{ label: '待审核', value: 'pending' },
					{ label: '已通过', value: 'approved' },
					{ label: '已驳回', value: 'rejected' }
				],
				dataSource: [{
					name: '全麦、无糖食品，糖尿病到底应该怎么选择？',
					likes: 389,
					collects: 324,
					forwards: 467
				}, {
					name: '挂号须知',
					likes: 389,
					collects: 324,
					forwards: 467
				}],
			}
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			changeTabbar(e) {
				if (e.label === '我的发布') {
					this.showMine = true
				} else {
					this.showMine = false
				}
			},
			changeTabbar2(e) {
				
			}
		}
	}
</script>

<style scoped>
	.home-container {
		min-height: 100vh;
		padding: 32rpx;
	}

	.tab-container {
		margin-bottom: 58rpx;
	}

	.item {
		display: flex;
		justify-content: flex-start;
		padding: 38rpx 16rpx 26rpx 17rpx;
		border-bottom: 1px solid rgb(237, 242, 250);
		background-color: white;
		border-radius: 10px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.left {
		width: 472rpx;
		flex: 1;
		padding: 0 10px;
		display: flex;
		flex-direction: column;
	}

	.edu-item {
		display: flex;
	}

	.between {
		display: flex;
		justify-content: space-between;
		margin-top: 14rpx;
	}
	.mine-stat{
		padding: 32rpx;
		background-color: white;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.102);
	}
	.mine-title{
		height: 30rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 30rpx;
	}
	.stats-card{
		padding: 32rpx 32rpx 0 32rpx;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-between;
	}
	.stat-number{
		width: 74rpx;
		padding: 16rpx;
		text-align: center;
		background-color: #E8F1FF;
		border-top-left-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		margin-bottom: 20rpx;
	}
	.color-light{
		color: #1D77FF;
	}
	.img {
		width: 160rpx;
		height: 116rpx;
	}
</style>